<template>
  <div class="index">
    <div>
      <van-nav-bar title="" left-text="返回" left-arrow @click-left="onClickLeft" fixed placeholder border />
    </div>
    <div class="mulv">
      <p>目录</p>
    </div>
    <van-cell-group title="" style="margin-top: 10px">
      <van-cell :title="'共' + cataDatas.length + '章'" />
    </van-cell-group>
    <van-cell-group title="" border>
      <van-cell :title="'第' + (index + 1) + '章' + ' ' + cadata.chapter" v-for="(cadata, index) in cataDatas" :key="index" border @click="readBook(index + 1)" />
    </van-cell-group>
  </div>
</template>

<script>
import axios from 'axios'
import { Toast } from 'vant'
import { NavBar } from 'vant'
import { Cell, CellGroup } from 'vant'

export default {
  name: 'catalog',
  data() {
    return {
      cataDatas: []
    }
  },
  methods: {
    onClickLeft() {
      this.$router.push({
        path: `/bookDetail/${this.$route.params.book_id}`
      })
    },
    readBook(index) {
      this.$router.push({
        path: `/read_book/${this.$route.params.book_id}/${index}`
      })
    }
  },
  mounted() {
    axios({
      method: 'post',
      url: this.baseURL + '/api/api/catalog',
      data: {
        id: this.$route.params.book_id
      }
    }).then((res) => {
      console.log(res)
      this.cataDatas = res.data
    })
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.mulv {
  color: red;
  border-bottom: 1px solid red;
  display: flex;
  justify-content: center;
}
</style>
